<template>
    <div class="knowledge-points-container">
      <el-card>
        <template #header>
          <div class="page-header">
            <div class="breadcrumb-section">
              <el-breadcrumb separator="/">
                <el-breadcrumb-item @click="goBack" class="clickable">技术方向管理</el-breadcrumb-item>
                <el-breadcrumb-item>{{ categoryInfo.categoryName }}</el-breadcrumb-item>
              </el-breadcrumb>
            </div>
          </div>
        </template>
  
        <div class="category-info-bar">
          <div class="info-item">
            <span class="label">技术方向：</span>
            <el-tag type="primary">{{ categoryInfo.categoryName }}</el-tag>
          </div>
          <div class="info-item">
            <span class="label">知识点总数：</span>
            <span class="value">{{ filteredKnowledgePoints.length }}</span>
          </div>
          <div class="info-item">
            <span class="label">筛选：</span>
            <el-select v-model="filterType" placeholder="全部类型" clearable @change="handleFilterChange">
              <el-option label="全部类型" value="" />
              <el-option label="基础知识" value="foundation" />
              <el-option label="框架技术" value="framework" />
              <el-option label="概念理论" value="concept" />
              <el-option label="工具使用" value="tool" />
            </el-select>
          </div>
          <div class="info-item">
            <span class="label">搜索：</span>
            <el-input
              v-model="searchKeyword"
              placeholder="搜索知识点名称"
              clearable
              style="width: 200px"
              @input="handleSearch"
            >
              <template #prefix>
                <el-icon><Search /></el-icon>
              </template>
            </el-input>
          </div>
        </div>
  
        <div class="knowledge-grid">
          <el-card
            v-for="point in filteredKnowledgePoints"
            :key="point.id"
            class="knowledge-card"
            :class="getCardClass(point)"
            shadow="hover"
            @click="enterStageMode(point)"
          >
            <div class="card-content">
              <div class="card-header-section">
                <div class="icon-section">
                  <span class="node-icon">{{ point.icon || getDefaultIcon(point.nodeType) }}</span>
                </div>
                <div class="badges">
                  <el-tag :type="getTypeTagType(point.nodeType)" size="small">
                    {{ getTypeText(point.nodeType) }}
                  </el-tag>
                  <el-tag v-if="point.isUniversal" type="success" size="small">
                    通用
                  </el-tag>
                </div>
              </div>
  
              <div class="card-body">
                <h3 class="knowledge-title">{{ point.name }}</h3>
                <p class="knowledge-desc">{{ point.description || '暂无描述' }}</p>
                
                <div class="knowledge-stats">
                  <div class="stat-item">
                    <el-icon><Star /></el-icon>
                    <span>难度：{{ point.difficulty }}/5</span>
                  </div>
                  <div class="stat-item" v-if="point.estimatedTime">
                    <el-icon><Clock /></el-icon>
                    <span>{{ point.estimatedTime }}</span>
                  </div>
                  <div class="stat-item">
                    <el-icon><Flag /></el-icon>
                    <span>{{ point.totalStages }}关</span>
                  </div>
                </div>
              </div>
  
              <div class="card-actions" @click.stop>
                <el-button
                  type="primary"
                  size="small"
                  @click="enterStageMode(point)"
                >
                  选择关卡
                </el-button>
              </div>
            </div>
          </el-card>
        </div>
      </el-card>
    </div>
  </template>
  
  <script setup>
  import { ref, reactive, computed, onMounted } from 'vue'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import { useRoute, useRouter } from 'vue-router'
  import { Star, Clock, Flag, VideoPlay, Search} from '@element-plus/icons-vue'
import { get } from '@/axios'
  
  const route = useRoute()
  const router = useRouter()
  
  // 从路由参数获取技术方向信息
  const categoryInfo = reactive({
    categoryId: route.query.categoryId,
    categoryKey: route.query.categoryKey,
    categoryName: route.query.categoryName || '未知技术方向'
  })
  
  // 响应式数据
  const knowledgePoints = ref([])
  
  const filterType = ref('')
  const searchKeyword = ref('')
  const dialogVisible = ref(false)
  const isEdit = ref(false)
  const submitLoading = ref(false)
  const formRef = ref()
  
  // 表单数据
  const knowledgeForm = reactive({
    id: null,
    nodeKey: '',
    name: '',
    nodeType: 'concept', // 默认值改为concept，符合数据库设计
    difficulty: 1,
    description: '',
    estimatedTime: '',
    totalStages: 10, // 默认值为10，符合数据库设计
    icon: '',
    isUniversal: 0,
    creator_id: null
  })
  
  // 表单验证规则
  const formRules = {
    nodeKey: [
      { required: true, message: '请输入节点标识', trigger: 'blur' },
      { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' },
      { pattern: /^[a-zA-Z0-9_]+$/, message: '只能包含字母、数字和下划线', trigger: 'blur' }
    ],
    name: [
      { required: true, message: '请输入节点名称', trigger: 'blur' },
      { min: 2, max: 100, message: '长度在 2 到 100 个字符', trigger: 'blur' }
    ],
    nodeType: [
      { required: true, message: '请选择节点类型', trigger: 'change' }
    ],
    difficulty: [
      { required: true, message: '请选择难度等级', trigger: 'change' },
      { type: 'number', min: 1, max: 5, message: '难度等级必须在1-5之间', trigger: 'change' }
    ],
    totalStages: [
      { required: true, message: '请输入总关卡数', trigger: 'blur' },
      { type: 'number', min: 1, max: 100, message: '总关卡数必须在1-100之间', trigger: 'change' }
    ]
  }

  fetchKnowledgePoints()
  function fetchKnowledgePoints(){
    get('/umsAdmin/getKnowledgePoints',{categoryId:categoryInfo.categoryId},content=>{
      console.dir(content)
      knowledgePoints.value = content
    })
  }
  
  // 计算属性
  const filteredKnowledgePoints = computed(() => {
    let filtered = knowledgePoints.value.filter(point => !point.is_deleted)
    
    // 按类型筛选
    if (filterType.value) {
      filtered = filtered.filter(point => point.nodeType === filterType.value)
    }
    
    // 按关键词搜索
    if (searchKeyword.value) {
      const keyword = searchKeyword.value.toLowerCase()
      filtered = filtered.filter(point => 
        point.name.toLowerCase().includes(keyword) ||
        point.description?.toLowerCase().includes(keyword) ||
        point.nodeKey.toLowerCase().includes(keyword)
      )
    }
    
    return filtered
  })
  
  // 方法
  const goBack = () => {
    router.push('/questions')
  }
  
  const getCardClass = (point) => {
    const progress = getProgressPercentage(point)
    if (progress === 100) return 'card-completed'
    if (progress > 0) return 'card-in-progress'
    return 'card-not-started'
  }
  
  const getDefaultIcon = (type) => {
    const icons = {
      'foundation': '📚',
      'framework': '🏗️',
      'concept': '💡',
      'tool': '🔧'
    }
    return icons[type] || '📖'
  }
  
  const getTypeTagType = (type) => {
    const types = {
      'foundation': 'success',
      'framework': 'primary',
      'concept': 'warning',
      'tool': 'info'
    }
    return types[type] || 'info'
  }
  
  const getTypeText = (type) => {
    const texts = {
      'foundation': '基础知识',
      'framework': '框架技术',
      'concept': '概念理论',
      'tool': '工具使用'
    }
    return texts[type] || type
  }
  
  const getProgressPercentage = (point) => {
    const completed = point.completed_stages || 0
    return Math.round((completed / point.totalStages) * 100)
  }
  
  const getProgressColor = (point) => {
    const percentage = getProgressPercentage(point)
    if (percentage === 100) return '#67c23a'
    if (percentage > 60) return '#409eff'
    if (percentage > 30) return '#e6a23c'
    return '#f56c6c'
  }
  
  const enterStageMode = (point) => {
    router.push({
      path: '/questions/knowledge/stages',
      query: {
        pointId: point.id,
        pointKey: point.nodeKey,
        pointName: point.name,
        totalStages: point.totalStages,
        completedStages: point.completed_stages || 0,
        categoryId: categoryInfo.categoryId,
        categoryName: categoryInfo.categoryName
      }
    })
  }
  
 

  
  const handleFilterChange = () => {
    // 筛选逻辑已通过计算属性实现
  }
  
  const handleSearch = () => {
    // 搜索逻辑已通过计算属性实现
  }
  
 
  

  
  onMounted(() => {
    console.log('知识点页面初始化完成', categoryInfo)
  })
  </script>
  
  <style scoped>
  .knowledge-points-container {
    padding: 20px;
  }
  
  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
  }
  
  .breadcrumb-section .clickable {
    cursor: pointer;
    color: #409eff;
  }
  
  .breadcrumb-section .clickable:hover {
    text-decoration: underline;
  }
  
  .header-actions {
    display: flex;
    gap: 10px;
  }
  
  .category-info-bar {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 20px 0;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    flex-wrap: wrap;
  }
  
  .info-item {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  .info-item .label {
    color: #606266;
    font-size: 14px;
    white-space: nowrap;
  }
  
  .info-item .value {
    font-weight: bold;
    color: #303133;
  }
  
  .knowledge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 20px;
    margin-top: 20px;
  }
  
  .knowledge-card {
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 12px;
    min-height: 300px;
  }
  
  .knowledge-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  }
  
  .card-not-started {
    border-left: 4px solid #f56c6c;
  }
  
  .card-in-progress {
    border-left: 4px solid #409eff;
  }
  
  .card-completed {
    border-left: 4px solid #67c23a;
  }
  
  .card-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 5px;
  }
  
  .card-header-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
  }
  
  .icon-section {
    display: flex;
    align-items: center;
  }
  
  .node-icon {
    font-size: 32px;
  }
  
  .badges {
    display: flex;
    gap: 5px;
    flex-direction: column;
    align-items: flex-end;
  }
  
  .card-body {
    flex: 1;
    margin-bottom: 15px;
  }
  
  .knowledge-title {
    margin: 0 0 10px 0;
    font-size: 18px;
    font-weight: bold;
    color: #303133;
    line-height: 1.4;
  }
  
  .knowledge-desc {
    margin: 0 0 15px 0;
    color: #606266;
    font-size: 14px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  .knowledge-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 15px;
  }
  
  .stat-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    color: #606266;
  }
  
  .progress-section {
    margin-bottom: 10px;
  }
  
  .progress-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
  }
  
  .progress-text {
    font-size: 14px;
    color: #606266;
  }
  
  .progress-value {
    font-size: 14px;
    font-weight: bold;
    color: #303133;
  }
  
  .card-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid #f0f0f0;
    flex-wrap: wrap;
  }
  
  .delete-btn:hover {
    color: #f56c6c !important;
  }
  
  .add-card {
    border: 2px dashed #dcdfe6;
    background: #fafafa;
  }
  
  .add-card:hover {
    border-color: #409eff;
    background: #f0f9ff;
  }
  
  .add-card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 300px;
    color: #909399;
  }
  
  .add-card-content:hover {
    color: #409eff;
  }
  
  .add-icon {
    margin-bottom: 15px;
  }
  
  .add-card-content h3 {
    margin: 0 0 10px 0;
    font-size: 16px;
  }
  
  .add-card-content p {
    margin: 0;
    font-size: 14px;
  }
  
  .icon-preview {
    margin-left: 15px;
    font-size: 14px;
    color: #606266;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  .form-tip {
    font-size: 12px;
    color: #909399;
    margin-top: 5px;
  }
  
  .dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
  }
  
  @media (max-width: 768px) {
    .knowledge-grid {
      grid-template-columns: 1fr;
    }
    
    .knowledge-points-container {
      padding: 10px;
    }
    
    .page-header {
      flex-direction: column;
      align-items: stretch;
    }
    
    .category-info-bar {
      flex-direction: column;
      gap: 10px;
    }
    
    .info-item {
      width: 100%;
    }
    
    .card-actions {
      flex-direction: column;
    }
  }
  </style>